<template>
  <div class="box">
    <Search />
    <div class="box-centent">
      <section class="box-left">
         <router-link to="../../Right" active-class="r1">  <div class="msg01" >
           {{msg}}
          </div></router-link>
           <router-link to="../../Right01" active-class="r1">  <div class="msg01" >
           {{msg01}}
          </div></router-link>
           <router-link to="../../Right02" active-class="r1">  <div class="msg01" >
           {{msg02}}
          </div></router-link>
           <router-link to="../../Right03" active-class="r1">  <div class="msg01" >
           {{msg03}}
          </div></router-link>
           <router-link to="../../Right04" active-class="r1">  <div class="msg01" >
           {{msg04}}
          </div></router-link>
        
      </section>
      <section class="box-right">
        <router-view> </router-view>
       
      </section>
    </div>
    <Footer class="footer"/>
  </div>
</template>

<script>
import Footer from "../../components/zhy/Footer";
import Search from "../../components/szn/Search";



export default {
  name: "Classify",
   data(){
        return {
          msg:"特别推荐",
          msg01:"实用英语",
          msg02:"兴趣技能",
          msg03:"大学考试",
          msg04:"职业考证",
        }
   },
  components: {
    Footer,
    Search,
   }
}
</script>

<style scoped>


.msg01{
     text-align: center;
     height: 0.5rem;
     line-height: 0.5rem;
     background: #f5f5f5;
}
.box{
  display: flex;
  flex-direction: column;
}
.r1{
    font-size: .2rem;
    font-weight: bold;
    background: white;
}
.box-centent {
  display: flex;
}
.box-left {
  width: 25%;
  height: 6rem;
  position: fixed;
  left: 0rem;
}
.box-right {
  width: 75%;
  display: flex;
  margin-left: 25%;
  margin-bottom: .8rem;
}
a{
  text-decoration: none;
  color: black;
}
.footer {
  position: fixed;
  bottom: -0.01rem;
  left: 0;
  z-index: 2;
}

</style>
